<template>
  <div
    class="info-card-container"
    :style="{ '--radius': radius, '--interval': interval }"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "InfoCard",
  props: {
    radius: {
      type: String,
      default: "0.375rem"
    },
    interval: {
      type: String,
      default: "0.0625rem"
    }
  },
  data() {
    return {};
  },

  methods: {}
};
</script>

<style lang="less" scoped>
@border-radius: var(--radius);
@interval: var(--interval);

.info-card-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  border-radius: @border-radius;
  background-image: linear-gradient(
    180deg,
    rgba(65, 146, 217, 1),
    rgba(65, 146, 217, 0.3),
    rgba(65, 146, 217, 0.3),
    rgba(65, 146, 217, 0.9)
  );

  &::after {
    content: "";
    position: absolute;
    top: @interval;
    right: @interval;
    bottom: @interval;
    left: @interval;
    box-shadow: inset 0px 0.3125rem 1.25rem 0.0625rem rgba(43, 46, 52, 0.15);
    border-radius: @border-radius;
    background: linear-gradient(
      180deg,
      rgba(47, 61, 82, 0.85) 0%,
      rgba(8, 20, 37, 0.65) 100%
    );
    mix-blend-mode: multiply;
  }
}
</style>
